<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data">
  <div class="form-group">
    <label for="testfile">上传文件</label>
    <div class="col-sm-10">
      <input type="file" accept="xml" id="testfile">
      <!-- 多文件上传:<input type="file" accept=".xlsx" id="testfile" multiple="multiple"/> -->
    </div>
  </div>
</form>
<input type="button" class="submit" value="上传">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $('.submit').click(function () {
    var files = $('#testfile').prop('files');
    var name = $.trim($('#upload_name').val());
    if (files.length <= 0) {
      alert("请选择文件");
      return;
    }

    var formData = new FormData();
    formData.append("testfile", files[0]);
    // 多文件上传需要给参数名称后面加上[]
    // formData.append("testfile[]", files[1]);
    formData.append("name", name);

    $.ajax({
      url:'http://127.0.0.1:8080/upload',
      type:'POST',
      async: false,
      data: formData,
      dataType:'json',
      cache: false, // 上传文件无需缓存
      processData : false, // 使数据不做处理
      contentType : false, // 不要设置Content-Type请求头
      success: function(data){
        console.log(data);
        if (data.status === 'ok') {
          alert('上传成功！');
        }
      },
      error:function(response){
        console.log(response);
      }
    });
  })
</script>

</body>
</html>

